<template>
  <div class="middlear">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(image, index) in focusList" :key="image.id">
        <img class="img" :src="image.picUrl" />
      </van-swipe-item>
    </van-swipe>

    <!-- 三个小图标 -->
    <div class="mark">
      <div class="item" v-for="(icon, index) in policyDescList" :key="index">
        <img class="icon" :src="icon.icon" alt="" />
        <span class="title">{{ icon.desc }}</span>
      </div>
    </div>
    <!-- 十个小图 -->
    <div class="content">
      <a class="item" v-for="(item, index) in kingKongModuleList" :key="index" :href="item.schemeUrl">
        <img class="good" :src="item.picUrl" />
        <span class="title">{{ item.text }}</span>
      </a>
    </div>
    <!-- 新人专享礼标题 -->
    <div class="newTitle">
      <span class="title">新人专享礼</span>
    </div>
    <!-- 新人专享 -->
    <div class="model">
      <div class="left">
        <div class="title">新人专享礼包</div>
        <div class="imgBox">
          <img class="img" src="https://yanxuan.nosdn.127.net/static-union/1648017994dd2933.png" alt="" />
        </div>
      </div>
      <!-- 右边  福利社和今日特价 -->
      <div class="right">
        <a class="top" v-for="(item, index) in indexActivityModuleList" :key="index" :href="item.targetUrl">
          <div class="one">
            <div class="title">{{ item.title }}</div>
            <div class="subTitle">{{ item.subTitle }}</div>
          </div>
          <div class="two">
            <div class="circle">
              <!-- 现价 -->
              <div class="line1">{{ item.activityPrice }}</div>
              <!-- 原价 -->
              <div class="line2">{{ item.originPrice }}</div>
            </div>
            <img class="img" :src="item.picUrl" alt="" />
          </div>
        </a>
      </div>
    </div>

    <!-- 类目热榜 -->
    <div class="hotTitle">类目热销榜</div>
    <div class="hot">
      <div class="line1">
        <a class="line1-item" v-for="(item, index) in twoList" :key="index" :href="item.targetUrl">
          <span>{{ item.categoryName }}</span>
          <img :src="item.picUrl" />
        </a>
      </div>
      <div class="line2">
        <a class="item3" v-for="(item, index) in sixList" :key="index" :href="item.targetUrl">
          <div class="title">{{ item.categoryName }}</div>
          <img class="img" :src="item.picUrl" />
        </a>
      </div>
    </div>
    <!-- 潮流馆 -->
    <div class="bottom">
      <div class="content">
        <div class="left">
          <div class="left1">
            <div class="text">
              <div class="text1">潮流馆</div>
              <div class="text2">流行新趋势</div>
            </div>
          </div>
        </div>

        <div class="right">
          <div class="text">
            <div class="text1">严选众筹</div>
            <div class="text2">探索美与用</div>
          </div>
          <div class="img">
            <van-image class="img1"
              src="https://yanxuan-item.nosdn.127.net/d398ebb1be7fd30f1e3c2a41b30c4ba9.png?quality=75&type=webp&imageView&thumbnail=150x150" />
            <van-image class="img2"
              src="https://yanxuan-item.nosdn.127.net/e9f01fb9a3d9e18f7a42dd9231390beb.png?quality=75&type=webp&imageView&thumbnail=150x150" />
          </div>
        </div>
      </div>
    </div>
    <!-- 下载APP -->
    <div class="footer">
      <div class="btn">
        <a>下载APP</a>
        <a href="##">电脑版</a>
      </div>
      <div class="des">
        <span>网易公司版权所有 © 1997-</span>
        <span>食品经营许可证：JY13301080111719</span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import Vue from "vue";
import { Swipe, SwipeItem, Lazyload, Image } from "vant";

Vue.use(Image);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Lazyload);
// 引入轮播图组件
export default {
  // 组件名字
  name: "",
  // 状态数据
  data() {
    return {};
  },

  mounted() { },
  components: {

  },

  methods: {},
  computed: {
    ...mapGetters("home", ["policyDescList", "focusList", "kingKongModuleList", "indexActivityModuleList", "categoryList", "twoList", "sixList", "shopping1List", "shopping2List"]),
  },
};
</script>
<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  width: 100%;
  height: 150px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;

  .img {
    width: 100%;
    height: 150px;
  }
}

// 三个小图标 自营品牌
.mark {
  width: 100%;
  height: 32px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  // background-color: antiquewhite;

  .item {
    display: flex;
    justify-items: center;

    .icon {
      width: 16px;
      height: 16px;
    }

    .title {
      font-size: 12px;
      margin-left: 4px;
      line-height: 16px;
    }
  }
}

// 十个小商品
.content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 10px;

  .item {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;

    .good {
      width: 55px;
      height: 55px;
      border-radius: 20px;
    }

    .title {
      width: 55px;
      font-size: 10px;
      margin: 5px 0px 15px 0px;
      text-align: center;
    }
  }
}

// 新人专享标题
.newTitle {
  width: 90%;
  margin: 0 auto;
  height: 45px;
  display: flex;
  justify-content: center;

  .title {
    // background-color: pink;
    line-height: 45px;
    font-size: 16px;
    color: #333;
  }

  .title:before {
    content: "— ";
  }

  .title:after {
    content: " —";
  }
}

// 新人专享
.model {
  height: 200px;
  width: 90%;
  margin: 0px auto;
  // background-color: pink;
  display: flex;
  margin-top: 10px;
  box-sizing: border-box;

  .left {
    flex: 1;
    background-color: #f9e9cf;
    margin-right: 2px;
    box-sizing: border-box;

    .title {
      font-size: 16px;
      color: #333;
      // background-color: rgb(255, 127, 127);
      margin: 15px 0px 0px 15px;
    }

    .imgBox {
      width: 120px;
      height: 120px;
      // background-color: rgb(238, 255, 127);
      margin: 18px auto;

      .img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;

    .top {
      margin-bottom: 1px;
      flex: 1;
      background-color: #fbe2d3;
      display: flex;
      justify-content: space-around;
      // border-bottom: 2px solid white;

      .one {
        font-size: 14px;
        color: #333;
        margin: 10px 0 0 10px;

        .subTitle {
          font-size: 10px;
          color: #7f7f7f;
        }
      }

      .two {
        width: 90px;
        height: 90px;
        // background-color: #39a9ed;
        margin-top: 10px;
        position: relative;

        .img {
          width: 100%;
          height: 100%;
        }

        .circle {
          width: 25px;
          height: 25px;
          border-radius: 50%;
          position: absolute;
          background-color: #f59524;
          opacity: 0.8;
          top: 5px;
          right: 10px;
          font-size: 10px;
          color: white;
          padding: 5px;

          .line2 {
            text-decoration: line-through;
          }
        }
      }
    }

    .bottom {
      // box-sizing: border-box;
      flex: 1;
      background-color: #ffecc2;
      display: flex;
      justify-content: space-between;

      .one {
        // background-color: #39eda8;
        font-size: 14px;
        margin-top: 10px;

        .subTitle {
          font-size: 10px;
          background-color: #cbb693;
          color: white;
          text-align: center;
        }
      }

      .two {
        width: 80px;
        height: 90px;
        // background-color: #39a9ed;
        margin-top: 10px;
        box-sizing: border-box;
        position: relative;
        right: 0px;

        .img {
          width: 100%;
          height: 100%;
        }

        .circle {
          width: 35px;
          height: 35px;
          border-radius: 50%;
          position: absolute;
          background-color: #f59524;
          opacity: 0.8;
          top: 0px;
          right: 10px;
          font-size: 10px;
          color: white;
          padding: 8px;
          box-sizing: border-box;

          .line2 {
            text-decoration: line-through;
          }
        }
      }
    }
  }
}

// 类目榜标题
.hotTitle {
  width: 90%;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  margin: 40px auto 10px auto;
}

// 类目类目
.hot {
  width: 90%;
  margin: 0 auto;
  height: 305px;

  .line1 {
    width: 100%;
    margin: 0 auto;
    height: 100px;
    display: flex;

    .line1-item {
      flex: 1;
      margin: 2px;
      background-color: #f9f3e4;
      position: relative;
      color: #333;

      img {
        width: 80px;
        height: 80px;
        float: right;
        margin-top: 10px;
      }

      span {
        position: absolute;
        top: 40%;
        left: 5px;
        font-size: 13px;
      }

      span:before {
        content: "";
        position: absolute;
        top: 22px;
        left: 0px;
        width: 20px;
        height: 2px;
        background-color: #333;
      }
    }
  }

  .line2 {
    height: 200px;
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0; //不挤压
    justify-content: space-between;

    &:after {
      content: "";
      width: 25%;
      border: 1px solid transparent;
    }

    .item3 {
      width: 20%;
      padding: 6px;
      height: 90px;
      margin: 2px;
      color: #333;
      background-color: #f5f5f5;
      display: flex;
      align-items: center;
      flex-direction: column;

      .title {
        // background-color: lightgray;
        font-size: 10px;
        text-align: center;
        margin-top: 5px;
      }

      .img {
        // background-colorgb(34, 16, 16)ray;
        width: 60px;
        height: 60px;
      }
    }
  }
}

//潮流热榜
.bottom {
  width: 100%;
  height: 120px;
  padding: 0 10px;
  box-sizing: border-box;

  .content {
    .left {
      float: left;
      width: 153px;
      height: 120px;
      background-color: #f5f5f5;
      margin: 0.04rem 0 0 0.04rem;
      padding: 0.2rem 0 0 0.2rem;
      box-sizing: border-box;

      .left1 {
        width: 100%;
        height: 100%;
        background: url("https://yanxuan.nosdn.127.net/static-union/166027186187d23a.png?imageView&thumbnail=343x264");
        background-size: 100% 100%;

        .text {
          .text1 {
            font-size: 14px;
          }

          .text2 {
            font-size: 8px;
            color: rgb(127, 127, 127);
          }
        }
      }
    }

    .right {
      background-color: #f5f5f5;
      float: right;
      width: 153px;
      height: 120px;

      .text {
        margin: 10px;

        .text1 {
          font-size: 14px;
        }

        .text2 {
          font-size: 10px;
          color: rgb(255, 111, 15);
        }
      }

      .img {
        margin: 0 3px 0 3px;
        display: flex;

        .img1 {
          width: 50%;
        }

        .img2 {
          width: 50%;
        }
      }
    }
  }
}

// APP底部
.footer {
  margin-top: 20px;
  width: 100%;
  height: 150px;
  background-color: #414141;
  overflow: hidden;
  padding: 20px 20px 20px 0;
  box-sizing: border-box;

  .btn {
    display: flex;
    text-align: center;

    width: 100%;
    justify-content: space-evenly;

    a {
      display: block;
      width: 60px;
      height: 20px;
      line-height: 20px;
      font-size: 8px;
      border: 1px solid #fff;
      text-align: center;
      color: #fff;
      display: block;
      border-radius: 3px;
    }
  }

  .des {
    font-size: 8px;
    color: #999;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
  }
}
</style>
